<template>
	<view>
		<my-popup></my-popup>
		<my-navbar title="统计明细"></my-navbar>
		<view class="page-line fixed"></view>
		<view class="page-line"></view>
		<view class="statsDetail-header fixed">
			<view class="header-item squad">
				<template v-if="detail.rangeList && detail.rangeList.length === 1">
					<view class="squad-name">{{ `${detail.rangeList[0].gradeName}${detail.rangeList[0].squadName}班` }}</view>
				</template>
				<template v-else>
					<view class="squad-name">{{ squad.squad ? `${squad.gradeName}${squad.squadName}班` : '全部班级' }}</view>
					<view class="squad-button app-button" hover-class="hover" @click="clickButton('squad')">切换班级</view>
				</template>
			</view>
			<view class="header-item count">共发送至：{{ studentCount }}名学生</view>
			<view class="header-item status">
				<view class="status-button" :class="{ selected: readStatus === 'Y' }" @click="clickButton('status', 'Y')">已查看（{{ readStatusCount.Y }}）</view>
				<view class="status-button" :class="{ selected: readStatus === 'N' }" @click="clickButton('status', 'N')">未查看（{{ readStatusCount.N }}）</view>
			</view>
		</view>
		<view class="statsDetail-header"></view>
		<template v-if="code">
			<template v-if="list.length">
				<view class="app-background"></view>
				<view class="statsDetail-container">
					<view v-for="(i, j) in list" :key="j" class="container-item" @click="clickStudentItem(i)" :hover-class="readStatus === 'Y' ? 'button-hover' : ''">
						<view class="item-left">
							<image class="left-headicon" :src="i.studentPhoto ? i.studentPhoto : '/static/notice/headicon_none.png'" mode="aspectFill"></image>
						</view>
						<view class="item-right">
							<view class="right-info">
								<view class="info-name">{{ i.childName }}</view>
								<view v-if="readStatus === 'Y'" class="info-message">{{ i.readTime }} 家长查看了通知</view>
							</view>
							<image v-if="readStatus === 'Y'" class="right-icon" src="/static/notice/icon_right.png"></image>
						</view>
					</view>
				</view>
				<view v-if="list.length > 6" class="page-nomore">---没有更多了---</view>
			</template>
			<template v-else>
				<view class="statsDetail-none">
					<template v-if="readStatus === 'Y'">
						<image class="unchecked-image" src="/static/notice/image_none2.png"></image>
						<view class="unchecked-text">暂时还没有成员查看</view>
					</template>
					<template v-if="readStatus === 'N'">
						<image class="checked-image" src="/static/notice/image_none3.png"></image>
						<view class="checked-text">所有成员都已经查看过了</view>
					</template>
				</view>
			</template>
		</template>
		<!-- 弹窗 -->
		<template>
			<my-popup :custom="2" :show="p_switch.show" @handle="p_switch.handle">
				<view class="page-popup popup1">
					<view class="popup-title">
						<view class="title-center">切换班级</view>
						<view class="title-side"><image class="side-icon" src="/static/img/icon_close.png" @click="p_switch.clickClose"></image></view>
					</view>
					<scroll-view class="popup1-content" :scroll-y="true">
						<view class="content-item" hover-class="button-hover" @click="p_switch.clickItem({})">全部班级</view>
						<view v-for="(i, j) in detail.rangeList" :key="j" class="content-item" hover-class="button-hover" @click="p_switch.clickItem(i)">
							{{ i.gradeName }}{{ i.squadName }}班
						</view>
						<safe-area></safe-area>
					</scroll-view>
				</view>
			</my-popup>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			// 通知详情 START
			detail: {},
			squad: {},
			// 通知详情 END
			// 统计列表 START
			pageNo: 1,
			pageSize: 15,
			readStatus: 'Y',
			pageCount: 0,
			readStatusCount: {
				Y: '--',
				N: '--'
			},
			code: 0,
			list: [],
			// 统计列表 END
			p_switch: {
				show: false,
				handle: (fn, e, payload) => {
					if (fn === 'clickMask') this.p_switch.show = false;
				},
				clickClose: () => {
					this.p_switch.show = false;
				},
				clickItem: async item => {
					this.p_switch.show = false;
					this.squad = item;
					try {
						await this.getCount();
					} catch (err) {}
					try {
						await this.getList(true);
					} catch (err) {}
				}
			}
		};
	},
	computed: {
		studentCount() {
			const count = this.readStatusCount.Y + this.readStatusCount.N;
			if(isNaN(count)) {
				return '--';
			} else {
				return count;
			}
		}
	},
	methods: {
		// 获取通知详情
		async getDetail() {
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.notice.get_detail1(this.id);
			} catch (err) {
				uni.hideLoading();
				this.$showToast(err.message || '获取通知详情失败');
				return;
			}
			this.detail = res1.result;
			uni.hideLoading();
		},
		// 获取查看/未查看人数
		async getCount() {
			const page = {
				pageNo: 1,
				pageSize: 1
			};
			const data = {
				noticeFk: this.id,
				squad: this.squad.squad
			};
			const pros = [];
			pros.push(this.$api.notice.get_student_check_list({ page, data: { ...data, readStatus: 'Y' } }).catch(err => err));
			pros.push(this.$api.notice.get_student_check_list({ page, data: { ...data, readStatus: 'N' } }).catch(err => err));
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await Promise.all(pros);
				if (res1[0].status === 1) this.readStatusCount.Y = res1[0].result.count;
				if (res1[1].status === 1) this.readStatusCount.N = res1[1].result.count;
			} catch (err) {}
			uni.hideLoading();
		},
		// 获取明细列表
		async getList(ifRefresh) {
			if (ifRefresh) {
				this.pageCount = 0;
				this.pageNo = 1;
			}
			if (this.pageCount !== 0 && this.pageNo >= this.pageCount + 1) {
				this.$showToast('已加载全部明细列表数据');
				return;
			}
			const page = {
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			const data = {
				noticeFk: this.id,
				readStatus: this.readStatus,
				squad: this.squad.squad
			};
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.notice.get_student_check_list({ page, data });
			} catch (err) {
				this.code = err.code;
				uni.hideLoading();
				this.$showToast(err.message || '获取明细列表数据失败');
				return;
			}
			this.code = res1.code;
			this.pageCount = res1.result.pageCount;
			this.readStatusCount[this.readStatus] = res1.result.count;
			if (ifRefresh) {
				this.list = [];
			}
			this.list.push(...res1.result.data);
			uni.hideLoading();
		},
		async clickButton(tag, payload) {
			switch (tag) {
				case 'status':
					if (this.readStatus === payload) return;
					this.readStatus = payload;
					try {
						await this.getList(true);
					} catch (err) {}
					return;
				case 'squad':
					this.p_switch.show = true;
					return;
			}
		},
		clickStudentItem(item) {
			if (this.readStatus === 'N') return;
			uni.navigateTo({
				url: `/packageA/pages/notice/statsDetail2?id=${this.id}&childId=${item.childId}&childName=${item.childName}`
			});
		}
	},
	async onLoad(options) {
		this.id = options.id;
		try {
			await this.getDetail();
		} catch (err) {}
		try {
			await this.getCount();
		} catch (err) {}
		try {
			await this.getList(true);
		} catch (err) {}
	},
	async onPullDownRefresh() {
		try {
			await this.getCount();
		} catch (err) {}
		try {
			await this.getList(true);
		} catch (err) {}
		uni.stopPullDownRefresh();
	},
	async onReachBottom() {
		this.pageNo++;
		try {
			await this.getList();
		} catch (err) {}
	}
};
</script>

<style lang="less" scoped>
.page-line {
	height: 20rpx;
	&.fixed {
		width: 750rpx;
		background-color: #f2f4f6;

		position: fixed;
	}
}

.page-nomore {
	padding: 15rpx 0;

	font-size: 24rpx;
	text-align: center;
	color: #7f7f7f;
}

.statsDetail-header {
	height: 230rpx;

	&.fixed {
		width: 750rpx;
		background-color: #ffffff;
		border-bottom: 2rpx solid #eeeeee;
		box-sizing: border-box;
		padding: 30rpx;

		position: fixed;

		.header-item {
			&.squad {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.squad-name {
					font-size: 32rpx;
					font-weight: 500;
					color: #222222;
				}
				.squad-button {
					border: 2rpx solid #e3e4e6;
					border-radius: 44rpx;

					font-size: 28rpx;
					color: #707070;

					padding: 5rpx 15rpx;
				}
			}

			&.count {
				color: #808080;
				font-size: 28rpx;
			}

			&.status {
				margin-top: 30rpx;

				font-size: 28rpx;
				color: #222222;

				display: flex;
				align-items: center;
				.status-button {
					width: 192rpx;
					height: 50rpx;
					background-color: #ebebeb;
					border-radius: 44rpx;
					margin-right: 30rpx;

					transition: all 0.3s;

					display: flex;
					align-items: center;
					justify-content: center;

					&:active {
						opacity: 0.5;
					}

					&.selected {
						color: #ff6600;
						background-color: #ffe0cc;
					}
				}
			}
		}
	}
}

.statsDetail-container {
	background-color: #ffffff;
	.container-item {
		display: flex;
		padding-left: 30rpx;

		transition: all 0.3s;

		.item-left {
			display: flex;
			align-items: center;
			.left-checkbox {
				width: 42rpx;
				height: 42rpx;
			}
			.left-headicon {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin: 0 30rpx;
			}
		}
		.item-right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #eeeeee;

			padding: 30rpx 0;
			padding-right: 30rpx;

			.right-info {
				.info-name {
					font-size: 32rpx;
					color: #222222;
					margin-bottom: 10rpx;
				}
				.info-message {
					font-size: 28rpx;
					color: #909399;
				}
			}
			.right-icon {
				width: 14rpx;
				height: 23rpx;
			}
		}

		&:last-child {
			.item-right {
				border-bottom: none;
			}
		}
	}
}

.selectSquadMember-buttons {
	padding: 0 30rpx;
	margin-top: 80rpx;
}

.selectSquadMember-button {
	height: 88rpx;
	background-color: #ff6600;
	border-radius: 44rpx;

	font-size: 36rpx;
	color: #ffffff;

	display: flex;
	align-items: center;
	justify-content: center;
}

.statsDetail-none {
	position: absolute;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%);

	display: flex;
	flex-direction: column;
	align-items: center;

	.unchecked-image {
		width: 188rpx;
		height: 169rpx;
	}
	.unchecked-text {
		margin-top: 70rpx;

		font-size: 28rpx;
		color: #707070;
	}

	.checked-image {
		width: 272rpx;
		height: 178rpx;
	}
	.checked-text {
		margin-top: 70rpx;

		font-size: 28rpx;
		color: #707070;
	}
}

.page-popup {
	height: 750rpx;
	background-color: #ffffff;
	border-radius: 30rpx 30rpx 0 0;

	display: flex;
	flex-direction: column;

	.popup-title {
		height: 120rpx;
		border-bottom: 2rpx solid #e3e4e6;

		position: relative;

		font-size: 36rpx;
		color: #222222;

		display: flex;
		align-items: center;
		justify-content: flex-end;

		.title-center {
			text-align: center;

			position: absolute;
			left: 0;
			right: 0;
		}

		.title-side {
			z-index: 1;

			position: absolute;
			left: 0;
			right: 0;

			display: flex;
			align-items: center;

			.side-icon {
				transition: all 0.3s;

				&:active {
					opacity: 0.5;
				}
			}
		}
	}
}

.popup1 {
	.title-side {
		justify-content: flex-end;

		.side-icon {
			width: 24rpx;
			height: 24rpx;
			padding: 30rpx;
		}
	}

	.popup1-content {
		flex: 1;
		font-size: 32rpx;
		color: #222222;
		overflow: hidden;

		.content-item {
			line-height: 120rpx;
			padding-left: 30rpx;

			transition: all 0.3s;

			&::after {
				content: '';

				display: block;
				width: 100%;
				border-bottom: 2rpx solid #e3e4e6;
			}
		}
	}
}
</style>
